<template>
    <div class="login-panel">
        <n-card title="博客管理后台登录">
            <n-form :rules="rules" :model="admin">
                <n-form-item path="account" label="账号">
                    <n-input v-model:value="admin.account" placeholder="请输入账号" />
                </n-form-item>
                <n-form-item path="password" label="密码">
                    <n-input v-model:value="admin.password" placeholder="请输入密码" />
                </n-form-item>
            </n-form>
            <template #footer>
                <n-checkbox v-model:checked="admin.remember" label="记住我" />
                <n-button @click="login">登录</n-button>
            </template>
        </n-card>
    </div>

</template>

<script setup lang="ts">
import type { AxiosInstance } from 'axios'
import { ref, reactive, inject } from 'vue'
import { useRouter,useRoute, type Router, type RouteLocationNormalizedLoaded } from 'vue-router'
import { useJwtStore } from '@/stores/jwt'  //引入jwtStore @符号表示从根目录(src目录)开始
import { useMessage } from 'naive-ui'
import type { MessageApiInjection } from 'naive-ui/es/message/src/MessageProvider'

let rules = {
    account: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 3, max: 12, message: '账户长度在3到12个字符之间', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 18, message: '密码长度在6到18个字符之间', trigger: 'blur' }
    ]
}

const router:Router = useRouter() //获取路由实例 定义在router/index.ts中的Router
const route = useRoute() 

const admin = reactive({
    account: localStorage.getItem('account') || '', // ||可在null的时候赋值
    password: localStorage.getItem('password') || '',
    remember: localStorage.getItem('remember') === '1'?true:false
})

let jwtStore = useJwtStore()


let axios = inject<AxiosInstance>('axios') //从容器中获取axios实例
let message: MessageApiInjection | undefined = inject<MessageApiInjection>('message') //从容器中获取message实例

// let message = useMessage()




async function login() {
    if (!message) return

    let params = { account: admin.account, password: admin.password }
    if (!axios) {
        console.error('axios实例不存在')
        return
    }

    try {
        //表单提交
        let config = {
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }
        let data = (await axios.post('/user/login', params, config)).data
        console.log("登录接口的响应消息：", data)
        if (data.code === 200) {
            //登录成功
            jwtStore.updateJwt(data.data)
            message?.success('登录成功')
            if (admin.remember) {
                localStorage.setItem('account', admin.account)
                localStorage.setItem('password', admin.password)
                localStorage.setItem('remember', '1')
            }
            //跳转到后台首页
            router.push({ name: 'dashboard' })
        } else {
            //登录失败
            alert(data.msg)
        }

    } catch (error) {
        message?.error('登录失败')
        console.error("登录失败了", error)

    }

}


</script>

<style scoped lang="scss">
.login-panel {
    width: 500px;
    margin: 0 auto;
    margin-top: 130px;
}
</style>